import React, { useState, useEffect, useMemo } from 'react'

export default function UseMemoDemo () {
  console.log('---UseMemoDemo---')

  const [count, setCount] = useState(0)
  const [age, setAge] = useState(0)

  useEffect(() => {
    // 开启定时器，去更改模型
    const timer1 = setInterval(() => {
      setCount(count => count + 1)
    }, 2000)

    const timer2 = setInterval(() => {
      setAge(age => age + 1)
    }, 500)

    return () => {
      clearInterval(timer1)
      clearInterval(timer2)
    }
  }, [])

  // 只要函数执行，它就会计算
  //   const doubleCount = count * 2

  const doubleCount = useMemo(() => {
    console.log('---useMemo---', new Date())
    return count * 2
  }, [count])

  return (
    <div>
      UseCallbackDemo
      <p>count is {count}</p>
      <p>double count is {doubleCount}</p>
      <p>age is {age}</p>
    </div>
  )
}
